<!--
 * @Descripttion: 文字适配背景
 * @Author: jhw
 * @Date: 2023-08-10 09:53:17
 * @LastEditors: jhw
 * @LastEditTime: 2023-08-10 11:10:41
-->
<template>
  <div>
    <div class="div">
      <span class="info">文字适配背景</span>
      <div class="box"></div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.div {
  width: 600px;
  height: 300px;
  background: #fff;
  position: relative;

  .info {
    font-size: 32px;
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-36%, -50%);
    mix-blend-mode: difference; // 混合模式
    z-index: 1;
    width: 100%;
    transition: 0.5s;
  }

  .box {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    clip-path: polygon(400px 0, 200px 100%, 100% 100%, 100% 0);
  }

  &:hover {
    .info {
      transform: translate(-20%, -50%);
    }
  }
}
</style>
